/**
* @Author: 李晨光
* @Date: 2019/12/18
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/18
**/
<comment>
  # 兑换明细
</comment>
<template>
  <div id="IntegrationExchangeMessage" class="p-box shop-detail">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header" style="box-shadow:none">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>兑换明细
        <mu-button icon slot="right" @click="showFilter">
          <!-- <mu-icon value="more"></mu-icon> -->
          <i class="iconfont iconshaixuan4"></i>
        </mu-button>
      </mu-appbar>
    </div>
    <div class="p-content">
      <div class="top">
        <div class="content-header">
          <span>兑换总分：</span>
          <span>{{totalScore-leftScore}}</span>
          <span style="margin-left:0.3rem">当前可兑换积分：</span>
          <span>{{leftScore}}</span>
        </div>

        <div class="content-sta">
          <span>{{currentDate}}</span>
          <span>总兑换:{{currentTotal}}</span>
        </div>
      </div>
      <div class="content" ref="container" style="padding:0">
        <mu-load-more
          v-if="data.length"
          @refresh="refresh"
          :refreshing="refreshing"
          :loading="loading"
          @load="load"
          :loaded-all="loadAll"
        >
          <div class="records" v-for="(item,index) in data" :key="index">
            <div class="records-left">
              <div class="records-img">
                <i class="iconfont icondianpu"></i>
              </div>
              <div class="records-body">
                <p class="exchange-shop">{{item.shopName}}</p>
                <p class="exchange-time">兑换时间: {{item.exchangeTime}}</p>
              </div>
            </div>
            <div class="records-right">-{{item.exchangeScore}}</div>
          </div>
          <p v-if="loadAll" class="nodataTips" style="margin-top:0.1rem">无更多数据了</p>
        </mu-load-more>
        <NoData v-if="!data.length&&!listLoading" />
      </div>
    </div>
    <DateFilter ref="DateFilter" @searchList="initPage" />
  </div>
</template>

<script>
import DateFilter from "@/dateFilter/DateFilter.vue";
export default {
  name: "IntegrationExchangeMessage",
  components: { DateFilter },
  props: {},
  data() {
    return {
      data: [],
      totalScore: 0,
      leftScore: 0,
      currentDate: 0,
      currentTotal: 0,
      listLoading: false,
      refreshing: false,
      loading: false,
      loaded: false,
      loadAll: false,
      pageSize: 10,
      pageNo: 0,
      totalPage: 1,
      params: {
        startTime: "",
        endTime: ""
      }
    };
  },
  computed: {},
  created() {
    let date = new Date();
    let D = new Date().getDate();
    let M = date.getMonth() + 1;
    D = D < 10 ? "0" + D : D;
    M = M < 10 ? "0" + M : M;
    let form = {
      startTime: date.getFullYear() + "-" + M + "-" + "01",
      endTime: date.getFullYear() + "-" + M + "-" + D
    };
    this.initPage(form);
  },
  mounted() {},
  watch: {},
  methods: {
    showFilter() {
      this.$refs.DateFilter.init();
    },
    initPage(form) {
      if (!form.startTime && !form.endTime) {
        this.currentDate = "所有时间";
      } else if (form.startTime && form.endTime) {
        this.currentDate = form.startTime + "至" + form.endTime;
      } else if (form.startTime && !form.endTime) {
        this.currentDate = form.startTime + "以后";
      } else if (!form.startTime && form.endTime) {
        this.currentDate = form.endTime + "以前";
      }
      this.params = {
        startTime: form.startTime,
        endTime: form.endTime,
        orgId: this.$A.GS("orgInfo")["orgId"],
        type: this.$A.GS("orgInfo")["type"],
        userId: this.$A.GS("userInfo")["userId"]
      };
      this.getScore();
      this.$nextTick(() => {
        this.refresh();
      });
    },
    getScore() {
      this.$A
        .Go("get", "/safety/userScore/myScore", {
          userId: this.$A.GS("userInfo")["userId"]
        })
        .then(res => {
          this.$closeLoading();
          if (res.code == 200) {
            if (res.body) {
              this.totalScore = res.body.totalScore;
              this.leftScore = res.body.leftScore;
            }
            // this.form.pointList = array;
          } else {
          }
        });
    },
    //获取查询条件下的总积分
    getExchangeTotal() {
      this.$A
        .Go("get", "/safety/shop/myScore/totalScore", this.params)
        .then(res => {
          if (res.code == 200) {
            if (res.body) {
              this.currentTotal = res.body.totalScore - res.body.leftScore;
            }
            // this.form.pointList = array;
          } else {
          }
        });
    },
    async refresh() {
      this.refreshing = true;
      this.pageNo = 0;
      this.totalPage = 1;
      this.loaded = false;
      this.loadAll = false;
      this.data = [];
      this.$refs.container.scrollTop = 0;
      this.getScore();
      this.getExchangeTotal();
      await this.getData();
      this.refreshing = false;
    },
    async load() {
      this.loading = true;
      await this.getData();
      this.loading = false;
    },
    async getData() {
      if (this.pageNo >= this.totalPage) {
        this.loadAll = true;
        return;
      }

      this.$openLoading();
      if (!this.loadAll) {
        this.pageNo += 1;
      } else {
        return;
      }
      let obj = {
        current: this.pageNo,
        size: this.pageSize
      };
      let params = Object.assign(obj, this.params);
      this.listLoading = true;
      this.$A.Go("get", "/safety/shop/exchangeRec/pageList", params).then(
        success => {
          if (success.code == 200) {
            let data = success.body.rows || [];
            let total = success.body.page.rows || "0";
            this.totalPage = Math.ceil(total / this.pageSize);
            // let data =  []
            // let total = 0
            if (this.pageNo == 1) {
              this.data = data;
            } else {
              this.data.push(...data);
            }
            if (
              total == 0 ||
              Math.ceil(total / this.pageSize) <= this.pageNo ||
              data.length <= 0
            ) {
              this.loadAll = true;
            }
          } else {
            this.data = [];
          }
          this.loaded = true;
          this.$closeLoading();
          this.listLoading = false;
        },
        err => {
          this.$closeLoading();
          console.warn(err);
          this.listLoading = false;
        }
      );
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#IntegrationExchangeMessage {
  .content {
    .lan-nodata {
      height: 100%;
    }
  }

  .records {
    height: 0.7rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0.01rem 0rem 0rem rgba(224, 224, 224, 1);
    margin-bottom: 0.01rem;
    display: flex;
    padding: 0.14rem;
    .records-left {
      flex: 1;
      display: flex;
      align-items: center;
      .records-img {
        margin-right: 0.2rem;
        .iconfont {
          font-size: 0.36rem;
          color: #0080cb;
        }
      }

      .exchange-shop {
        font-size: 0.15rem;
        font-weight: bold;
        color: rgba(61, 61, 61, 1);
      }
      .exchange-time {
      }
    }
    .records-right {
      display: flex;
      height: 100%;
      align-items: center;
      font-size: 0.25rem;
      font-weight: bold;
    }
  }
}
</style>
